<template>
  <!--  轮播图-->
  <section class="slide-ad">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in sliderList">
          <a href="javascript:;">
            <img :src="'/static/images/featured/2019spring/'+item.sliderImage" class="tablet-hidden mobile-hidden">
            <img :src="'/static/images/featured/2019spring/'+item.sliderImageMobile" class="tablet-hidden mobile-show">
          </a>
        </div>
      </div>
      <div class="swiper-button-nextn transition"></div>
    </div>
  </section>
</template>

<script>
  import Swiper from 'swiper'
  import '@/assets/css/swiper.min.css'

  export default {
    data() {
      return {
        sliderList: [
          {
            sliderImage: 'banner-1.jpg',
            sliderImageMobile: 'banner-1-mobile.jpg'
          },
          {
            sliderImage: 'kv-1.jpg',
            sliderImageMobile: 'kv-1-mobile.jpg'
          },
          {
            sliderImage: 'kv-cold-brew.jpg',
            sliderImageMobile: 'kv-cold-brew-mobile.jpg'
          },
          {
            sliderImage: 'kv-2.jpg',
            sliderImageMobile: 'kv-2-mobile.jpg'
          },
          {
            sliderImage: 'kv-5-icecream.jpg',
            sliderImageMobile: 'kv-5-icecream-mobile.jpg'
          },
          {
            sliderImage: 'kv-ice.jpg',
            sliderImageMobile: 'kv-ice-mobile.jpg'
          }
        ]
      }
    },
    mounted() {
      this.swiperSliderConfig()
    },
    methods: {
      swiperSliderConfig() {
        let swiper_slider_ad = new Swiper('.slider-ad .swiper-container', {
          // horizontal水平
          direction: 'horizontal',
          // true 为loop模式生效
          loop: true,
          // slides滑块动画之间的持续时间（单位ms）
          speed: 800,
          // 过渡延迟时间（单位ms），参数没有指定的情况下，不生效，（补充：当用户操作后autoplay失效）
          autoplay: {
            delay: 3600,
            // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）
            stopOnLastSlide: false,
            // 是否禁止autoplay
            disableOnInteraction: false
          },
          navigation: {
            // 获取前进按钮的HTML元素  滑到最后一个slide时隐藏前进按钮
            nextEl: '.swiper-button-next'
          }
        });

        // swiper_slider_ad.el.onmouseover = function () {
        //   swiper_slider_ad.autoplay.stop()
          //       },
          // swiper_slider_ad.el.onmouseout = function () {
          //   swiper_slider_ad.startAutoplay();
          //         }
            //         $('.slider-ad .swiper-button-next').click(()=>{
            //          swiper_slider_ad.autoplay.start()
            // })
          }
        }
      }
</script>

